<template>
  <!------------------- 树状分类列表 ------------------
  @desc 多级分类列表，同级项单一展开
  @author kyle
  @date 2021-06-07
  @props
    treeData  ———— 分类列表
    activeId ———— 当前选中项id
  @method
    treeClickEvent    ———— 点击单项事件
-->
  <ul class="vue-tree">
    <TreeItem
      v-for="(item, index) in computedTreeData"
      :key="item.id"
      :tree-item-data="item"
      :active-id="activeId"
      :tree-click-event="treeClickEvent"
    />
  </ul>
</template>

<script>
import TreeItem from './treeItem'
export default {
  name: 'Tree',
  components: {
    TreeItem
  },
  props: {
    // 树形控件数据
    treeData: {
      type: Array,
      default() {
        return []
      }
    },
    activeId: {
      type: Number,
      default: -1
    },
  },
  data() {
    return {
    }
  },
  computed: {
    computedTreeData() {
      const _arr = this.treeData
      this.initData(_arr, 0)
      return _arr
    }
  },
  methods: {
    initData(arr, level) {
      if (arr && arr.length > 0) {
        arr.forEach(element => {
          if (element && !element.level) {
            element.level = level
          }
          if (element.expand === undefined) {
            element.expand = false
          }
          if (element.children && element.children.length > 0) {
            this.initData(element.children, level + 1)
          }
        })
      }
    },
    // 相同parent-id级别收起
    foldSameParentItem(arr, level, id, expand) {
      console.log(level, id, expand)
      if (arr && arr.length > 0) {
				arr.forEach(element => {
					if (element && element.level === level) {
						if (element.id === id) {
							element.expand = !expand
						} else {
							element.expand = false
						}
					} else if (element.children && element.children.length > 0) {
						this.foldSameParentItem(element.children, level, id, expand)
					}
				})
      }
    },
    treeClickEvent(item, treeItem) {
			this.foldSameParentItem(this.treeData, item.level, item.id, item.expand)
      this.$emit('treeClickEvent', item, treeItem)
    }
  }
}
</script>

<style lang="scss">
.vue-tree{
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 180px;
  max-width: 200px;
  text-align:center;
  color:$black;
  .tree-item{
    cursor: pointer;
    .tree-content{
      position: relative;
      .tree-label{
        position: relative;
        font-size: 24px;
        padding:31px 40px;
        &:after{
          content:'';
          display:inline-block;
          position:absolute;
          right:20px;
          top:36px;
          width:10px;
          height:10px;
          transform:rotate(45deg);
          border:1px solid;
          border-color:transparent currentColor currentColor transparent;
        }
      }
    }
  }
  .expand{
    background: $colorF;
    &>.sub-tree{
      display: block;
    }
    &>.tree-content{
      .tree-label{
        &:after{
          transform:rotate(-135deg);
          top:46px;
        }
      }
    }
  }
  .active{
    &>.tree-content{
      @include color-primary;
      background: $colorF;
      .tree-label{
        &:before{
          content: '';
          position:absolute;
          height: calc(100% - 62px);
          width: 6px;
          border-radius: 0 6px 6px 0;
          @include bg-primary;
          left: 0;
          top: 31px;
        }
      }
    }
  }
  .no-child{
    .tree-content{
      .tree-label{
      &:after{
        content: none;
      }
      }
    }
  }
}
.sub-tree{
  display: none;
  color:$color3;
  .tree-item{
      .tree-content{
        .tree-label{
        &:after{
          width: 8px;
          height: 8px;
          right:22px;
        }
        }
      }
  }
}
</style>
